<template>
  <div :class="$style.wrapper">
    <div @click="visible = true">
      <div style="display: flex">
        <transition-group class="my-input-sc">
          <el-tag
            v-for="(item, idx) in val"
            :key="idx"
            :closable="true"
            size="small"
            type="info"
            hit
            @close="deleteTag(idx)"
          >
            <span>{{ item }}</span>
          </el-tag>
          <!-- <span>
            <i class="el-icon-user"></i>
            选择用户
          </span> -->
        </transition-group>
        <el-button icon="el-icon-user">选择用户</el-button>
      </div>
    </div>

    <el-dialog
      title="选择用户"
      v-model="visible"
      width="900px"
      height="800px"
      append-to-body
    >
      <div style="display: flex; gap: 20px">
        <div>
          <!--部门数据-->
          <div class="head-container">
            <el-input
              v-model="deptName"
              placeholder="请输入部门名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
        </div>
        <!--用户数据-->
        <div class="head-container">
          <el-transfer
            v-model="val"
            filterable
            :data="user1"
            :titles="['用户', '已选用户']"
            style="height: 100%"
            :props="props"
          ></el-transfer>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSelectChange">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import BaseService from "@/api/base/base";
const personService = new BaseService("attendance/person");
export default {
  name: "HdUserSelect",
  components: { Treeselect },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    /**
     * 字表的值，{key:value}的格式
     */
    value: null,
    /**
     * 是否只读
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "50%",
    },
    height: {
      type: [String, Number],
      default: "300",
    },
    props: {
      type: Object,
      default() {
        return {
          label: "personName",
          key: "personName",
          disabled: "disabled",
        };
      },
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
      depId: null,
      deptOptions: this.$store.state.options.deptTree,
      user1: [],
      val: [],
      deptName: "",
      targetData: [],
      leftDefaultChecked: [],
      rightDefaultChecked: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    value(val) {
      this.val = val;
    },
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.val = this.value;
    this.getTreeselect();
  },
  methods: {
    /** 查询用户列表 */
    getList(deptId) {
      this.loading = true;
      personService.getList({ deptId, pageSize: 9999 }).then((response) => {
        this.user1 = response.rows;
        this.loading = false;
      });
    },
    deleteTag(index) {
      this.val.splice(index, 1);
    },
    onSelectChange(e, ...a) {
      this.visible = false;
      this.$emit("change", this.val);
      setTimeout(() => {
        this.dispatch("ElFormItem", "el.form.change", this.val);
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      console.log(value, data);
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.getList(data.id);
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      if (!this.$store.state.options.deptTree[0]) {
        this.loading = true;
        dispatch("GetDeptTree").then((res) => {
          this.loading = false;
        });
      }
    },

    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
  },
};
</script>
<style module lang="scss">
.wrapper {
  :global {
    .my-input-sc {
      min-height: 36px;
      height: auto;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
      padding: 5px;
    }
  }
}
</style>
<style>
.vue-treeselect__menu-container {
  font-size: 14px;
}
</style>
